{% extends "menu.html" %}

{% block title %}术语抽取{% endblock %}

{% block content %}
    <!-- 其他内容 -->
{#    <div class="flex h-full">#}
        <!-- Left Panel -->
    <div class="flex h-full">
        <div class="w-1/3 bg-gray-50 p-8 shadow-md">
            <h1 class="text-4xl font-bold text-gray-800 mb-8">GlossAI</h1>

            <textarea id="inputText" rows="6" cols="60" placeholder="Enter your text here..."
                      class="w-full p-4 border border-gray-300 rounded mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>

            <div class="mb-4">
                <label for="queryType" class="block text-gray-700 mb-2">Choose query type:</label>
                <select id="queryType"
                        class="w-full border p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="model">大模型查询</option>
                    <option value="database">术语库查询</option>
                </select>
            </div>

            <div class="mb-4">
                <label for="modelChoice" class="block text-gray-700 mb-2">Choose a model:</label>
                <select id="modelChoice"
                        class="w-full border p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="glm-4-flash">智谱清言 GLM-4-flash</option>
                    <option value="GPT-3.5">OpenAI GPT-3.5</option>
                    <option value="Spark-Max">科大讯飞 Spark-Max</option>
                    <option value="DeepSeek-V2.5">幻方量化 DeepSeek-V2.5</option>
                </select>
            </div>

            <button onclick="extractTerms()"
                    class="w-full bg-green-500 text-white p-3 rounded mt-4 hover:bg-green-700 transition duration-200">
                Extract Terminology
            </button>
        </div>

        <!-- Right Panel (Output Section) -->
        <div class="w-2/3 p-8 overflow-y-auto">
            <div id="output" class="text-left">
                <!-- Extraction results will be displayed here -->
            </div>
        </div>
    </div>
{#    </div>#}


    <script>

        async function extractTerms() {
            const inputText = document.getElementById("inputText").value;
            const modelChoice = document.getElementById("modelChoice").value;
            const queryType = document.getElementById("queryType").value;
            const outputDiv = document.getElementById("output");

            if (inputText.trim() === "") {
                outputDiv.innerHTML = "<p class='text-red-500'>抽取栏为空，请输入文本！</p>";
                return;
            }

            outputDiv.innerHTML = "<p class='text-blue-500'>正在查询，请稍候...</p>";

            try {
                let apiUrl = queryType === "model" ? "http://127.0.0.1:5000/extract-terms" : "http://127.0.0.1:5000/search_terms";
                let requestBody = {text: inputText, model: modelChoice};

                const response = await fetch(apiUrl, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(requestBody)
                });

                const result = await response.json();
                outputDiv.innerHTML = "";

                if (queryType === "database" && Object.keys(result).length === 0) {
                    outputDiv.innerHTML = "<p class='text-red-500'>没有找到与术语库匹配的术语</p>";
                    return;
                }

                for (const key in result) {
                    if (result.hasOwnProperty(key)) {
                        const term = result[key];
                        outputDiv.innerHTML += `
                            <div class="bg-white shadow-md rounded p-4 mb-4">
                                <p><strong>Chinese:</strong> ${term.chinese}</p>
                                <p><strong>English:</strong> ${term.english}</p>
                                <p><strong>Example:</strong> ${term.example}</p>
                            </div>
                        `;
                    }
                }

                outputDiv.innerHTML += "<p class='text-green-500'>查询成功！</p>";
            } catch (error) {
                outputDiv.innerHTML = `<p class='text-red-500'>查询过程中出现错误，请重试！</p>
                                        <p>错误信息: ${error.message}</p>`;
            }
        }
    </script>
{% endblock %}
